<template>
  <div ref="pie" class="comp"></div>
</template>

<script setup>
import { ref, reactive, toRefs, inject, onMounted, onBeforeUnmount ,watch} from "vue";
import { useStore } from "vuex";
let store=useStore()
const echarts = inject("echarts");
const api = inject("api");
let pie = ref(null);
let echartsInstance = null;
let alldata = [];
watch(
  () => store.state.themeName,
  () => {
    echartsInstance.dispose();
    initEcharts();
    enitEcharts();
    asisEcharts();
  }
);

function initEcharts() {
  echartsInstance = echarts.init(pie.value, store.state.themeName);
  let initOptions = {
    title: {
      text: "种植农作物面积统计",
    },
    legend: {
      top: "10%",
    },
    tooltip: {},
    series: [
      {
        type: "pie",
        label: {
          show: true,
        },
      },
    ],
  };
  echartsInstance.setOption(initOptions);
}
async function getData() {
  let { data } = await api("TotalAreaCropsProportion");
    // console.log(data);
  alldata = data;
  enitEcharts();
}
function enitEcharts() {
  let enitOptions = {
    series: [
      {
        data: alldata,
        center: ["50%", "60%"],
      },
    ],
  };
  echartsInstance.setOption(enitOptions);
}
function asisEcharts() {
  let width = pie.value.offsetWidth;
  let scale = (width / 100) * 3.6;
  let initOptions = {
    title: {
      textStyle: {
        fontSize: scale,
      },
    },
    legend: {
      itemGap: scale / 2,
      itemWidth: scale,
      itemHeight: scale / 2,
    },
    series: [
      {
        radius: scale * 5,
      },
    ],
  };
  echartsInstance.setOption(initOptions);
  echartsInstance.resize();
}
onMounted(() => {
  initEcharts();
  getData();
  asisEcharts();
  window.addEventListener("resize", asisEcharts);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", asisEcharts);
});
defineExpose({
    asisEcharts
})
</script>

<style scoped lang="scss"></style>
